<template>
      <div class="app">
        <router-link to="/index/myCommodity" tag="span"><span class="logo">我的订单</span></router-link>
        <div class="top">
          <div class="top-item"
               v-for="(index,key) in lite"
               :key="key"
               @click="tz(key)"
               :class="{active:key===Index}"
          >{{index}}</div>
        </div>
        <router-view></router-view>
      </div>
</template>

<script>
export default {
  name: 'order',
  data() {
    return {
      lite: ['全部', '代付款', '代发货', '待收货', '待评价'],
      Index: null,
    };
  },
  created() {
    this.Index = this.$route.query.Index;
  },
  methods: {
    tz(index) {
      this.Index = index;
    },
  },
  updated() {
    if (this.Index === 0) {
      this.$router.push({ path: 'whole' });
    } else if (this.Index === 1) {
      this.$router.push({ path: 'obligation' });
    } else if (this.Index === 2) {
      this.$router.push({ path: 'TobeDelivered' });
    } else if (this.Index === 3) {
      this.$router.push({ path: 'TobeReceived' });
    } else if (this.Index === 4) {
      this.$router.push({ path: 'TobeEvaluated' });
    }
  },
};
</script>

<style lang="scss" scoped>
.app{
  .logo{

  }
  .active{
    color: orange;
    border-bottom: 1px solid orange;
  }
  .top{
    display: flex;
    display: -webkit-flex;
    -webkit-justify-content: space-between;
    width: 100%;
    height: 100px;
    .top-item{
      text-align: center;
      line-height: 100px;
      width: 20%;
      margin: 10px;
    }
  }
}
</style>
